<template>
    <view class="xilu flex-box flex-col flex-align-start">
        <u-navbar :safeAreaInsetTop="true" autoBack="true" :fixed="false" bgColor="#F9C022" title="我的收入">
        </u-navbar>
        <view class="flex-grow-1 flex-box flex-col flex-align-start relative">
            <view class="xilu_bg_block"></view>
            <view class="xilu_content pt30 w100 flex-grow-1 flex-col flex-box flex-align-start">
                <!--  -->
                <view class="xilu_incom_box ptb40 plr30">
                    <view class="flex-box pb30">
                        <view class="flex-grow-1">
                            <view class="col89 pb10">可提现金额（元）</view>
                            <view class="fs50 fwb col10"><text class="fs30">¥</text>{{info.money}}</view>
                        </view>
                        <view class="btn2" @click="withdraw()">提现</view>
                    </view>
                    <view class="flex-box">
                        <view class="flex-grow-1">
                            <view class="col89 pb10">累计收入（元）</view>
                            <view class="fs30 fwb col10">¥{{info.total_money}}</view>
                        </view>
                        <view class="flex-grow-1">
                            <view class="col89 pb10">冻结金额（元）</view>
                            <view class="fs30 fwb col10">¥{{info.freeze_money}}</view>
                        </view>
                    </view>
                </view>
                <!--  -->
                <view class="fs34 col10 fwb pt40 pb30 plr30">收入明细</view>
                <view class="flex-grow-1 w100 plr30">
                    <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
                        <view class="xilu_income_item" v-for="(item,index) in moneyList" :key="index">
                            <view class="fs26 col5 flex-box flex-between pb20">
                                <view v-if="item.extra_text.type == 1">订单号 {{item.extra_text.order_no}}</view>
                                <view :class="item.extra_text.status==1?'red':''" v-else-if="item.extra_text.type==2">{{item.extra_text.status==1?'审核中':(item.extra_text.status==2?'提现成功':'未通过')}}</view>
                                <view class="cola">{{item.createtime_text}}</view>
                            </view>
                            <view class="fs26 col5 flex-box ">
                                <view class="flex-grow-1 m-ellipsis" v-if="item.extra_text.type==1">{{item.extra_text.product_name}}</view>
                                <view class="flex-grow-1 m-ellipsis" v-else-if="item.extra_text.type==2">申请提现</view>
                                <view class="red fs34 fwb" :class="item.money>0?'red':'green'"><text class="fs24"></text><text>{{item.money>0?'+':''}}</text><text>{{item.money}}</text></view>
                                <!-- <view class="green fs34 fwb"><text>-</text><text class="fs24">¥</text><text>150.00</text></view> -->
                            </view>
                        </view>
                    </mescroll-uni>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                info: {
                    money: '0.00',
                    total_money: '0.00',
                    freeze_money: '0.00'
                },
                moneyList: []
            };
        },
        onLoad() {
            this.fetchIncome();
        },
        methods: {
            fetchIncome() {
                this.$core.post({
                    url: 'xilumarket.user/my_income',
                    data: {
                        user_id: this.userId
                    },
                    success: ret => {
                        this.info = ret.data;
                    },
                    fail: err => {}
                });
            },
            withdraw() {
                uni.navigateTo({
                    url: '/pages/withdraw/withdraw',
                    events: {
                        withdrawSuccess: data => {
                            this.fetchIncome();
							this.mescroll.resetUpScroll();
                        }
                    }
                })
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                this.$core.get({
                    url: 'xilumarket.user/money_list',
                    loading: false,
                    data: {
                        page: pageNum,
                        pageSize: pageSize
                    },
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        //let totalSize = data.total;
                        // 接口返回的是否有下一页 (true/false)
                        //let hasNext = data.current_page;

                        //设置列表数据
                        if (page.num == 1) this.moneyList = []; //如果是第一页需手动置空列表
                        this.moneyList = this.moneyList.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);


                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })

            },
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        height: 100vh;

        &_logo {
            width: 80rpx;
            height: 80rpx;
        }

        &_center_slot {
            width: 402rpx;
            height: 75rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #555555;
            margin-left: -60rpx;
            padding: 0 12rpx 0 20rpx;
        }

        &_bg {
            width: 750rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(452rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        .container {
            background-color: #f7f9fc;
            min-height: calc(100vh - 44px - var(--status-bar-height));
        }

        .btn2 {
            width: 150rpx;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 30rpx;
        }

        &_content {
            position: relative;
            z-index: 4;
        }

        &_incom_box {
            background: #FFC100;
            box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(203, 154, 0, 0.3);
            border-radius: 20rpx;
            width: 690rpx;
            margin: 0 30rpx 30rpx;
        }

        &_income_item {
            padding: 30rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 15rpx;
        }
    }
</style>